<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>病房管理可视化</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
            background-color: cornflowerblue;
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .row {
            display: flex;
            flex: 1;
        }

        .chart {
            flex: 1;
            margin: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 768px) {
            .row {
                flex-direction: column;
            }
        }

        div .chart1 {
            height: 400px;
            width: 400px;
            color: chocolate;
            background-color: white;
            margin-top: 20px;
            font-size: 90px;

        }

        .box{

            margin: 50px;

            position:relative;
            width: 300px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to right, #0884e8, #1202f1);
            border-radius:15px;
        }
        .box:before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: #fff;
            z-index:-1;

        }
        .box:after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: #fff;
            z-index:-1;
            filter:blur(40px);

        }
        .box:before,
        .box:after{
            background: linear-gradient(235deg,#89ff00,#060c21,#00bcd4);
        }
        .content{
            padding:20px;
            box-sizing:border-box;
            color:#fff;
        }

        p {
            font-size: 40px;
            font-family: "楷体";
        }

    </style>

</head>
<body>
<div class="container">
    <div class="row">
        <div id="box1" class="chart"><img src="./1.png" width="111px" height="111px"></div>
        <div class="box">
            <div class="content">
                <p>病房管理</p>
            </div>
        </div>
        <div id="box3" class="chart"></div>
    </div>
    <div class="row">
        <div id="box4" class="chart">
           
        </div>
        <div id="box5" class="chart"></div>
        <div id="box6" class="chart"></div>
    </div>
</div>

<script src="static/templates/echarts.min.js"></script>
<script src="static/templates/jquery.js"></script>
<script type="text/javascript">
    // 图表1: Ajax请求数据并初始化图表
    // $.ajax({
    //     url: "list1",
    //     success: function(result) {
    //         var data1 = result[0];
    //         var data2 = result[1];
    //
    //         var option1 = {
    //             tooltip: {},
    //             legend: { data: ['销量'] },
    //             xAxis: { data: data1 },
    //             yAxis: {},
    //             series: [{
    //                 name: '销量',
    //                 type: 'bar',
    //                 data: data2
    //             }]
    //         };
    //
    //         var myChart1 = echarts.init(document.getElementById('box1'));
    //         myChart1.setOption(option1);
    //     }
    // });

    // 图表2: 预设数据
    // var option2 = {
    //     color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
    //     },
    //     legend: { data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'] },
    //     grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    //     xAxis: [{ type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }],
    //     yAxis: [{ type: 'value' }],
    //     series: [
    //         {
    //             name: 'Line 1',
    //             type: 'line',
    //             stack: 'Total',
    //             smooth: true,
    //             lineStyle: { width: 0 },
    //             showSymbol: false,
    //             areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //                     { offset: 0, color: 'rgb(128, 255, 165)' },
    //                     { offset: 1, color: 'rgb(1, 191, 236)' }
    //                 ])},
    //             emphasis: { focus: 'series' },
    //             data: [140, 232, 101, 264, 90, 340, 250]
    //         },
    //         // 其他系列数据...
    //     ]
    // };

    var option4 = {
        title: {
            text: '医院职工在岗情况',
            // left:'center'


        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['主治医师', '主任医师', '护士']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '主治医师',
                type: 'line',
                step: 'start',
                data: [120, 132, 150, 134, 90, 230, 210]
            },
            {
                name: '主任医师',
                type: 'line',
                step: 'middle',
                data: [220, 282, 201, 250, 290, 430, 410]
            },
            {
                name: '护士',
                type: 'line',
                step: 'end',
                data: [450, 432, 401, 454, 590, 530, 510]
            }
        ]
    };
    var myChart4 = echarts.init(document.getElementById('box4'));
     myChart4.setOption(option4);

    // 图表3: 预设数据
    // var option3 = {
    //     xAxis: { type: 'category', boundaryGap: false },
    //     yAxis: { type: 'value', boundaryGap: [0, '30%'] },
    //     visualMap: {
    //         type: 'piecewise',
    //         show: false,
    //         dimension: 0,
    //         seriesIndex: 0,
    //         pieces: [
    //             { gt: 1, lt: 3, color: 'rgba(0, 0, 180, 0.4)' },
    //             { gt: 5, lt: 7, color: 'rgba(0, 0, 180, 0.4)' }
    //         ]
    //     },
    //     series: [{
    //         type: 'line',
    //         smooth: 0.6,
    //         symbol: 'none',
    //         lineStyle: { color: '#5470C6', width: 5 },
    //         markLine: { symbol: ['none', 'none'], label: { show: false }, data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }] },
    //         areaStyle: {},
    //         data: [
    //             ['2019-10-10', 200], ['2019-10-11', 560], ['2019-10-12', 750],
    //             ['2019-10-13', 580], ['2019-10-14', 250], ['2019-10-15', 300],
    //             ['2019-10-16', 450], ['2019-10-17', 300], ['2019-10-18', 100]
    //         ]
    //     }]
    // };
    option3 = {
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [50, 200],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: 38, name: '主任医师'},
                    { value: 30, name: '主治医师' },
                    { value: 25, name: '住院医师' },
                    { value: 20, name: '副主任医师' },
                    { value: 17, name: '主管护士' },

                ]
            }
        ]
    };
    var myChart3 = echarts.init(document.getElementById('box3'));
    myChart3.setOption(option3);
    // // 图表4: 极坐标系图
    // var option4 = {
    //     title: { text: 'Tangential Polar Bar Label Position (middle)' },
    //     polar: { radius: [30, '80%'] },
    //     angleAxis: { max: 4, startAngle: 75 },
    //     radiusAxis: { type: 'category', data: ['a', 'b', 'c', 'd'] },
    //     tooltip: {},
    //     series: {
    //         type: 'bar',
    //         data: [2, 1.2, 2.4, 3.6],
    //         coordinateSystem: 'polar',
    //         label: { show: true, position: 'middle', formatter: '{b}: {c}' }
    //     }
    // };
    // var myChart4 = echarts.init(document.getElementById('box4'));
    // myChart4.setOption(option4);

    // 图表5: 饼图
    var option5 = {
        title:{text:'病房情况'},
        tooltip: { trigger: 'item' },
        legend: { top: '5%', left: 'center' },
        series: [{
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: 40, fontWeight: 'bold' } },
            labelLine: { show: false },
            data: [
                { value: 1048, name: '使用' }, { value: 735, name: '空闲' },
                { value: 580, name: '维修' }, { value: 484, name: '正在修建' },

            ]
        }]
    };
    var myChart5 = echarts.init(document.getElementById('box5'));
    myChart5.setOption(option5);


    // // 图表6: 柱状图
    // var option6 = {
    //     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    //     yAxis: { type: 'value' },
    //     series: [{
    //         data: [120, 200, 150, 80, 70, 110, 130],
    //         type: 'bar',
    //         showBackground: true,
    //         backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' }
    //     }]
    // };

    option6 = {
        title: {
            text: '病人探望情况'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六','周天']
        },
        series: [
            {
                name: '亲属探望',
                type: 'bar',
                data: [182, 234, 290, 104, 131, 500,450,]
            },
            {
                name: '非亲属探望',
                type: 'bar',
                data: [150, 100, 130, 121, 134, 200,210]
            }
        ]
    };
    var myChart6 = echarts.init(document.getElementById('box6'));
    myChart6.setOption(option6);
</script>
</body>
</html>
